<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>CSS배경</title>
	</head>

	<body style="background-image: url('images/suji02.jpg');
	 background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed">
		<h1>CSS배경</h1>
		<h2>배경이미지 띄우기</h2>
			<div style="width: 550px; height: 350px; border: 1px solid black;
			 background-image: url('images/suji02.jpg');"> </div>
		
		<h2>배경이미지 반복 제어: background-repeat</h2>
			<div style="width: 550px; height: 350px; border: 1px solid black;
			 background-image: url('images/suji02.jpg'); background-repeat: no-repeat;"> </div>
			<div style="width: 550px; height: 350px; border: 1px solid black;
			 background-image: url('images/suji02.jpg'); background-repeat: repeat-x;"> </div>
			<div style="width: 550px; height: 350px; border: 1px solid black;
			 background-image: url('images/suji02.jpg'); background-repeat: repeat-y;"> </div>
			
		<h2>배경이미지 위치지정: background-position</h2>
		<div style="width: 550px; height: 350px; border: 1px solid black;
		 background-image: url('images/suji02.jpg'); background-repeat: no-repeat;
		  background-position: center center"> </div>
		<div style="width: 550px; height: 350px; border: 1px solid black;
		 background-image: url('images/suji02.jpg'); background-repeat: no-repeat;
		  background-position: 290px 113px"> </div>
		<div style="width: 550px; height: 350px; border: 1px solid black;
		 background-image: url('images/suji02.jpg'); background-repeat: no-repeat;
		  background-position: 50% 50%"> </div>
		  
		  <h2>배경이미지 고정하기: background-attachment</h2>
		  <!-- body에 style로 입력 -->
	</body>
</html>